<template>
  <div class="hidden_class">
    <aside class="sidebar">
      <nav class="py-4">
        <template v-for="(group, groupName) in navGroups" :key="groupName">
          <div class="section-title">{{ groupName }}</div>
          <ul>
            <li
                v-for="(item, index) in group"
                :key="index"
                :class="{ active: $route.path === item.path }"
                class="nav-item"
            >
              <i :class="item.icon" class="w-5 text-center"></i>
              <i><router-link :to="item.path" class="ml-3">{{ item.title }}</router-link></i>
            </li>
          </ul>
        </template>
      </nav>
    </aside>
  </div>
</template>

<script setup>
const navGroups = {
  "主导航": [
    { path: '/dashboard', title: '仪表盘', icon: 'fa fa-tachometer' },
    { path: '/department', title: '部门管理', icon: 'fa fa-sitemap' },
    { path: '/employees', title: '教职工管理', icon: 'fa fa-users' },
    { path: '/position', title: '职务管理', icon: 'fa fa-briefcase' },
    { path: '/title', title: '职称管理', icon: 'fa fa-graduation-cap' }
  ],
  "教师信息": [
    { path: '/education', title: '学籍经历', icon: 'fa fa-book' },
    { path: '/family', title: '家庭关系', icon: 'fa fa-home' },
    { path: '/salary', title: '薪资管理', icon: 'fa fa-money' },
    { path: '/rewards', title: '奖惩信息', icon: 'fa fa-trophy' },
    { path: '/course', title: '课程信息', icon: 'fa fa-book' },
  ],
  "系统管理": [
    { path: '/analytics', title: '统计分析', icon: 'fa fa-bar-chart' },
    { path: '/backup', title: '数据备份', icon: 'fa fa-database' },
    { path: '/settings', title: '系统设置', icon: 'fa fa-cog' }
  ]
};
</script>

<style scoped>
ul > li {
  display: flex;
  padding: 12px 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
}
</style>